<template>
  <div class="config-form">
    <el-form :model="formData" label-width="100px">
      <!-- 通用配置 -->
      <el-form-item label="名称">
        <el-input v-model="formData.name" />
      </el-form-item>
      
      <!-- 邻接矩阵配置 -->
      <template v-if="component.type === 'adjacencyMatrix'">
        <el-form-item label="顶点数量">
          <el-input-number v-model="formData.config.vertexCount" :min="1" @change="updateMatrix" />
        </el-form-item>
        <el-form-item label="有向图">
          <el-switch v-model="formData.config.directed" />
        </el-form-item>
        <el-form-item label="带权图">
          <el-switch v-model="formData.config.weighted" />
        </el-form-item>
        
        <!-- 邻接矩阵编辑 -->
        <el-form-item label="邻接矩阵">
          <div class="matrix-editor">
            <table>
              <thead>
                <tr>
                  <th></th>
                  <th v-for="i in formData.config.vertexCount" :key="i">V{{i-1}}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="i in formData.config.vertexCount" :key="i">
                  <td>V{{i-1}}</td>
                  <td v-for="j in formData.config.vertexCount" :key="j">
                    <el-input-number 
                      v-if="i !== j"
                      v-model="formData.config.matrix[i-1][j-1]"
                      :min="0"
                      :step="1"
                      size="small"
                      controls-position="right"
                    />
                    <span v-else>-</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-form-item>
      </template>
      
      <!-- 数组配置 -->
      <template v-if="component.type === 'array'">
        <el-form-item label="数组大小">
          <el-input-number v-model="formData.config.size" :min="1" />
        </el-form-item>
        <el-form-item label="元素类型">
          <el-select v-model="formData.config.elementType">
            <el-option label="整数" value="int" />
            <el-option label="浮点数" value="double" />
            <el-option label="字符串" value="string" />
          </el-select>
        </el-form-item>
      </template>
      
      <!-- 迪杰斯特拉算法配置 -->
      <template v-if="component.type === 'dijkstra'">
        <el-form-item label="起点">
          <el-input-number v-model="formData.config.startVertex" :min="0" />
        </el-form-item>
        <el-form-item label="终点">
          <el-input-number v-model="formData.config.endVertex" :min="0" />
        </el-form-item>
      </template>
      
      <!-- 冒泡排序配置 -->
      <template v-if="component.type === 'bubbleSort'">
        <el-form-item label="排序顺序">
          <el-radio-group v-model="formData.config.order">
            <el-radio label="asc">升序</el-radio>
            <el-radio label="desc">降序</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      
      <el-form-item>
        <el-button type="primary" @click="saveConfig">保存</el-button>
        <el-button @click="resetConfig">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  component: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['save'])

const formData = ref({ ...props.component })

// 初始化或更新邻接矩阵
const updateMatrix = () => {
  if (formData.value.type === 'adjacencyMatrix') {
    const size = formData.value.config.vertexCount
    const newMatrix = Array(size).fill(0).map(() => Array(size).fill(0))
    
    // 保留原有的值
    const oldMatrix = formData.value.config.matrix || []
    oldMatrix.forEach((row, i) => {
      if (i < size) {
        row.forEach((val, j) => {
          if (j < size) {
            newMatrix[i][j] = val
          }
        })
      }
    })
    
    formData.value.config.matrix = newMatrix
  }
}

// 监听顶点数量变化
watch(() => formData.value.config.vertexCount, updateMatrix)

// 初始化时创建矩阵
if (!formData.value.config.matrix) {
  updateMatrix()
}

const resetConfig = () => {
  formData.value = { ...props.component }
  updateMatrix()
}

const saveConfig = () => {
  emit('save', { ...formData.value })
}
</script>

<style scoped>
.config-form {
  padding: 20px;
}

.matrix-editor {
  max-width: 100%;
  overflow-x: auto;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
}

.matrix-editor table {
  border-collapse: collapse;
}

.matrix-editor th,
.matrix-editor td {
  padding: 4px;
  text-align: center;
  min-width: 60px;
}

.matrix-editor th {
  background: #eef1f6;
  font-weight: bold;
}

.matrix-editor td:first-child {
  background: #eef1f6;
  font-weight: bold;
}

.matrix-editor :deep(.el-input-number) {
  width: 100%;
}
</style> 